<template>
	<view class="home">
		<!-- 搜索栏 -->
		<SearchLink></SearchLink>
		<!-- 轮播图 -->
		<swiper indicator-dots indicator-color="rgba(255,255,255,.5)" indicator-active-color="#fff" autoplay circular>
			<swiper-item v-for="item in swiperData" :key="item.goods_id">
				<view class="swiper-item">
					<image :src="item.image_src"></image>
				</view>
			</swiper-item>
		</swiper>
		<!-- 分类 -->
		<view class="cat-items">
			<view class="cat-item" v-for="(item,index) in catData" :key="index">
				<image :src="item.image_src"></image>
			</view>
		</view>
		<!-- 楼层 -->
		<view class="floor-data" v-for="(item,index) in FloorData" :key="index">
			<!-- 标题 -->
			<view class="floor-title">
				<image :src="item.floor_title.image_src"></image>
			</view>
			<!-- 商品 -->
			<view class="goods">
				<view class="left">
					<image :src="item.product_list[0].image_src"></image>
				</view>
				<view class="right">
					<view v-for="(it,idx) in item.product_list" :key="idx">
						<image v-if="idx" :src="it.image_src" ></image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import SearchLink from '../../components/SearchLink.vue'
	// import request from '../../utils/request.js'
	export default {
		data() {
			return {
				// 轮播图
				swiperData: [],
				// 分类
				catData: [],
				// 楼层
				FloorData: []
			}
		},
		methods: {
			async getSwiperData() {
				this.swiperData = await this.$request({
					url: '/api/public/v1/home/swiperdata'
				})
				// console.log(this.swiperData)
			},
			async getCatData() {
				this.catData = await this.$request({
					url: '/api/public/v1/home/catitems'
				})
				// console.log(this.catData)
			},
			async getFloorData() {
				this.FloorData = await this.$request({
					url: '/api/public/v1/home/floordata'
				})
				console.log(this.FloorData)
			}
		},
		components: {
			SearchLink
		},
		onLoad() {
			this.getSwiperData()
			this.getCatData()
			this.getFloorData()
		}
	}
</script>

<style lang="less">
	.home {
		// 轮播图
		.swiper-item {
			height: 340rpx;
			width: 100%;

			image {
				height: 100%;
				width: 100%;
			}
		}

		// 分类
		.cat-items {
			height: 194rpx;
			display: flex;
			justify-content: space-evenly;
			align-items: center;

			.cat-item {
				height: 140rpx;
				width: 128rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}

		// 楼层
		.floor-data {
			.floor-title {
				height: 88rpx;
				margin-bottom: 20rpx;
				background-color: #f4f4f4;
				display: flex;
				align-items: flex-end;

				image {
					height: 70%;
					width: 100%;
				}
			}

			.goods {
				display: flex;
				padding: 0 17rpx;
				justify-content: center;

				.left {
					width: 232rpx;

					image {
						width: 100%;
					}
				}

				.right {
					display: flex;
					flex-wrap: wrap;
					flex: 1;
					image {
						box-sizing: border-box;
						width: 232rpx;
						height: 100%;
						margin-left: 10rpx;
						padding-bottom: 10rpx;
					}
				}
			}

		}
	}
</style>
